<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
	    <meta content="telephone=no" name="format-detection" />
	    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>校咖汇</title>
	</head>
	<body id="allModel">
		<script src="js/mui.min.js"></script>
		<script src="js/template.js"></script>
		<script src="js/personal_details.html.js"></script>
		<script id="modelContent" type="text/html">
			<nav class="foot-bar-tab">
				<a class="foot-tab-item" href="advice.html">
					<span class="foot-icon foot-icon-advice"></span>
					<span class="foot-tab-label">在线咨询</span>
				</a>
				<a class="foot-tab-item" href="contact.html">
					<span class="foot-icon foot-icon-tel"></span>
					<span class="foot-tab-label">联系TA</span>
				</a>
			</nav><!--底部条-->
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href={{banner[banner.length-1].link}}>
									<img src={{banner[banner.length-1].route}}/>
								</a>
							</div><!--最后一张图利-->
				    		{{each banner as value i }}
				    			<div class="mui-slider-item">
									<a href={{banner[i].link}}>
										<img src={{banner[i].route}}/>
									</a>
								</div>
				    		{{/each}}
				    		<div class="mui-slider-item mui-slider-item-duplicate">
								<a href={{banner[0].link}}>
									<img src={{banner[0].route}}/>
								</a>
							</div><!--第一张图片-->
						</div>
						<div class="mui-slider-indicator">
							{{each banner as value i}} {{if i==0}}
								<div class='mui-indicator mui-active'></div>
							{{/if}} {{if i>0}}
								<div class='mui-indicator'></div>
							{{/if}}{{/each}}
						</div>
					</div><!--焦点图-->
					<figure class="base-info">
						<img src={{route}} />
						<figcaption>
							<h1>{{name}}</h1>
							<p>{{shcool}}</p>
						</figcaption>
						<span class="mui-icon mui-icon-location-filled">{{site}}</span>
					</figure><!--基本信息-->
					<ul class="mui-table-view serve-list">
						{{each serve as value i}}
				        <li class="mui-table-view-cell">
				        	<img src={{serve[i].route}} />
				        	{{serve[i].title}}
				        </li>
				        {{/each}}
				    </ul><!--服务说明列表-->
				    {{each opus as value i}}
			    	<div class="opus-box">
				    	<h2>{{opus[i].title}}</h2>
				    	<div class="opus-content">
				    		{{if i==0}}
				    		<div id="slider" class="mui-slider">
								<div class="mui-slider-group mui-slider-loop">
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href={{vedio[vedio.length-1].link}}>
											<img src={{vedio[vedio.length-1].route}}/>
										</a>
									</div><!--最后一张图利-->
						    		{{each vedio as value i}}
						    			<div class="mui-slider-item">
											<a href={{vedio[i].link}}>
												<img src={{vedio[i].route}}/>
											</a>
										</div>
						    		{{/each}}
						    		<div class="mui-slider-item mui-slider-item-duplicate">
										<a href={{vedio[0].link}}>
											<img src={{vedio[0].route}}/>
										</a>
									</div><!--第一张图片-->
								</div>
								<div class="mui-slider-indicator">
									{{each vedio as value i}} {{if i==0}}
										<div class='mui-indicator mui-active'></div>
									{{/if}} {{if i>0}}
										<div class='mui-indicator'></div>
									{{/if}}{{/each}}
								</div>
							</div><!--视频列表-->
							{{/if}}
				    		<h1>{{opus[i].opusName}}</h1>
				    		{{each opus[i].stage as value i}}
				    		<p>{{value}}</p>
				    		{{/each}}
				    		<span class="mui-icon mui-icon-eye">{{opus[i].num}}</span>
				    	</div>
				    	<div class="other-opus">
				    		<h1>{{value.otherTitle}}</h1>
				    		<ul class="mui-table-view">
								{{each opus[i].otherOpus as value i}}
			    		        <li class="mui-table-view-cell">
			    		            <a href={{value.link}}>
			    		                <img src={{value.route}}/>
			    		               	 {{value.intro}}
			    		            </a>
			    		        </li>
			    		        {{/each}}
			    		    </ul>
				    	</div>
				    </div><!--个人作品-->
				    {{/each}}
				</div>
			</div>
		</script>
		<script>
			//判断个人信息状态
			window.onload = function(){
				infoType();
				function infoType(){
					var all = document.getElementById('allModel');
					var opus_box = all.getElementsByClassName('opus-box');
					var i = 0;
					var url = location.search; //获取url中"?"符后的字串
					var str = url.substr(1);   
					strs = str.split("=")[1];
					if(strs==1){//如果infoType=1视频
						opus_box[0].style.display = "block";
					};
					if(strs==2){//如果infoType=2图片
						opus_box[1].style.display = "block";
					};
					if(strs==3){//如果infoType=3图文
						opus_box[2].style.display = "block";
					}
				};
			};
			(function($){
				mui.init();
				//页面数据
				var data = template('modelContent',myData);
				document.getElementById('allModel').innerHTML = data;
				
				//禁用滚动条
				document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
				  e.preventDefault();
				});
				
				//自定义滚动条
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				
				//焦点图
				var slider = mui("#slider");
				slider.slider({
					interval: 3000
				});
				
			})(mui);
		</script>
	</body>
</html>
